<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>供应商供货统计</title>
		<link rel="stylesheet" href="../../lib/layui-v2.6.3/css/layui.css" media="all">
	</head>
	<body>
		<div class="layui-tab">
		  <ul class="layui-tab-title">
		    <li class="layui-this">供货商所有单据</li>
		    <li>供货商供货情况</li>
		    <li>供货商商品销售情况</li>
		    <li>供货商账务</li>
		  </ul>
		  <div class="layui-tab-content">
			  <script type="text/html" id="toolbarDemo">
			    <span>单据的详情信息：</span><span style="color: red;">jcfsdfsfs</span>
			  </script>
		    <div class="layui-tab-item layui-show">
				<form class="layui-form">
					<div class="layui-panel" style="margin: 15px;">
						<div style="padding-top:20px ;">
							<div class="layui-form-item">
								<div class="layui-inline">
									<label class="layui-form-label">统计月份：</label>
									<div class="layui-input-inline" style="width: 150px;">
										<input type="text" autocomplete="off" id="test-startDate-1" class="layui-input"
											placeholder="开始日期">
									</div>
									<div class="layui-form-mid">-</div>
									<div class="layui-input-inline" style="width: 150px;">
										<input type="text" autocomplete="off" id="test-endDate-1" class="layui-input"
											placeholder="结束日期">
									</div>
								</div>
								<div class="layui-inline"> 
									<label class="layui-form-label" style="width: 85px;">供货商名称：</label>
									<div class="layui-input-inline">
										<input type="text" id="demo4"  class="layui-input">
									</div>
								</div>
								<div class="layui-inline">
									<button type="button"  class="layui-btn layui-btn-normal">查询F5</button>
								</div>
							</div>
						</div>
					</div>
				</form>
				<fieldset class="layui-elem-field">
				  <legend>往来账务列表</legend>
				  <div class="layui-field-box">
					<table  class="layui-hide" id="test"  lay-filter="test"></table>
					<table  class="layui-hide" id="test1"  lay-filter="test1"></table>
				  </div>
				</fieldset>
		    </div>
		    <!-- 供货商供货情况-->
			<div class="layui-tab-item" style="padding: 15px;">
				<form class="layui-form">
					<div class="layui-panel" style="padding-top: 20px ;">
						<div class="layui-form-item">
							<label class="layui-form-label">统计月份：</label>
							<div class="layui-inline">
								<div class="layui-input-inline" style="width: 150px;">
									<input type="text" autocomplete="off" id="test-startDate-2" class="layui-input"
										placeholder="开始日期">
								</div>
								<div class="layui-form-mid">-</div>
								<div class="layui-input-inline" style="width: 150px;">
									<input type="text" autocomplete="off" id="test-endDate-2" class="layui-input"
										placeholder="结束日期">
								</div>
							</div>
							<div class="layui-inline">
								<label class="layui-form-label" style="width: 100px;">供货商名称：</label>
								<div class="layui-input-inline" style="width: 120px;">
								  <input type="text" name="" autocomplete="off" class="layui-input">
								</div>
							</div>
							<div class="layui-inline">
								<button type="button" id="demo" class="layui-btn"><i class="layui-icon">&#xe615;</i></button> 
							</div>
							<div class="layui-inline">
								<button type="button" class="layui-btn">查找</button> 
							</div>
							<div class="layui-inline">
								<div class="layui-input-block">
								  <input type="radio" name="sex" value="总汇表" title="总汇表">
								  <input type="radio" name="sex" value="流水表" title="流水表">
								</div>
							</div>
						</div>
					</div>
				</form>
			
				<table class="layui-hide" id="condition"  lay-filter="condition" ></table>
			</div>
			<!-- 供货商商品销售情况 -->
		    <div class="layui-tab-item" style="padding: 15px;">
				<form class="layui-form">
					<div class="layui-panel" style="padding-top: 20px;">
						<div class="layui-form-item">
							<label class="layui-form-label">统计月份：</label>
							<div class="layui-inline">
								<div class="layui-input-inline" style="width: 150px;">
									<input type="text" autocomplete="off" id="test-startDate-3" class="layui-input"
										placeholder="开始日期">
								</div>
								<div class="layui-form-mid">-</div>
								<div class="layui-input-inline" style="width: 150px;">
									<input type="text" autocomplete="off" id="test-endDate-3" class="layui-input"
										placeholder="结束日期">
								</div>
							</div>
							<div class="layui-inline">
								<label class="layui-form-label" style="width: 100px;">供货商名称：</label>
								<div class="layui-input-inline" style="width: 120px;">
								  <input type="text" name="" autocomplete="off" class="layui-input">
								</div>
							</div>
							<div class="layui-inline">
								<button type="button" id="demo1" class="layui-btn"><i class="layui-icon">&#xe615;</i></button> 
							</div>
							
							<div class="layui-inline">
								<label class="layui-form-label" style="width: 100px;">商品编号名称：</label>
								<div class="layui-input-inline" style="width: 120px;">
								  <input type="text" name="" autocomplete="off" class="layui-input">
								</div>
							</div>
							<div class="layui-inline">
								<button type="button" class="layui-btn">查找</button> 
							</div>
						</div>
					</div>
				</form>
				<table class="layui-hide" id="condition1"  lay-filter="condition" ></table>
			</div>
		    <!-- 供货商账务-->
			<div class="layui-tab-item"  style="padding: 15px;">
				<form class="layui-form">
					<div class="layui-panel" style="padding-top: 20px ;">
						<div class="layui-form-item">
							<label class="layui-form-label">统计月份：</label>
							<div class="layui-inline">
								<div class="layui-input-inline" style="width: 150px;">
									<input type="text" autocomplete="off" id="test-startDate-4" class="layui-input"
										placeholder="开始日期">
								</div>
								<div class="layui-form-mid">-</div>
								<div class="layui-input-inline" style="width: 150px;">
									<input type="text" autocomplete="off" id="test-endDate-4" class="layui-input"
										placeholder="结束日期">
								</div>
							</div>
							<div class="layui-inline">
								<button type="button" class="layui-btn">查找F5</button> 
							</div>
						</div>
					</div>
				</form>
				<table class="layui-hide" id="condition2"  lay-filter="condition" ></table>
			</div>
		  </div>
		</div>
		<script type="text/html" id="num">
		    <div class="layui-btn-container">
		        <button class="layui-btn layui-btn-normal layui-btn-sm data-add-btn" lay-event="add"> 修改 </button>
		        <button class="layui-btn layui-btn-sm layui-btn-danger data-delete-btn" lay-event="delete"> 确定 </button>
				<button class="layui-btn layui-btn-sm layui-btn-danger data-delete-btn" lay-event="yes"> 退出 </button>
		    </div>
		</script>
		
		<div id="hh" style="display: none; padding: 20px;">
			hhhh
		</div>
			
		<script src="../../layui/layui.js" charset="utf-8"></script>
		<script src="../../js/lay-config.js?v=1.0.4" charset="utf-8"></script>
		<script>
			layui.use(['form', 'table', 'layer','laydate','tableSelect'], function() {
				var laydate = layui.laydate;
				var $ = layui.jquery,
					form = layui.form,
					table = layui.table,
					tableSelect = layui.tableSelect,
					layer = layui.layer;
					
				/* ↓↓↓↓↓↓↓↓供货商所有单据↓↓↓↓↓↓↓↓↓↓ */
				//绑定点击事件
				table.on('toolbar(currentTableId)', function(obj) {
					switch (obj.event) {
						case "add":
							add()
							break;
						case "delete":
							break;
						case "yes":
							break;
					}
				})
				function add() {
					layer.open({
						type: 1,
						title: '<h2 style="color: #1E9FFF;font-weight: bold;">添加商品(采购进货)<h2>',
						scrollbar: false,
						area: ['400px', '400px'],
						content: $('#hh')
					});
				}	
				tableSelect.render({
				    elem: '#demo4',
				    checkedKey: 'id',
					id: 'currentTableId',
				    table: {
				        url: '../../api/tableSelect.json',
						toolbar: '#num',
				        cols: [[
				            { field: 'id', title: 'ID', width: 100 },
				            { field: 'username', title: '姓名', width: 300 },
				            { field: 'sex', title: '性别', width: 100 }
				        ]]
				    },
					done: function (elem, data) {
						var NEWJSON = []
						layui.each(data.data, function (index, item) {
							NEWJSON.push(item.username)
						})
						elem.val(NEWJSON.join(","))
					}
				});
				
				laydate.render({
					elem: '#test-startDate-1'
				});
				laydate.render({
					elem: '#test-endDate-1'
				});
				table.render({
				    elem: '#test'
				    ,url: '../../api/table.json'
					,height: 300
				    ,cellMinWidth: 80 
					,totalRow: true
				    ,cols: [[
				      {field:'id', width:100, title: 'ID', sort: true, totalRowText: '单据合计:'}
				      ,{field:'username', width:80, title: '用户名',}
				      ,{field:'sex', width:80, title: '性别', sort: true}
				      ,{field:'city', width:80, title: '城市'}
				      ,{field:'sign', title: '签名', width: '30%', minWidth: 100}
				      ,{field:'experience', title: '积分', sort: true}
				      ,{field:'score', title: '评分', sort: true}
				      ,{field:'classify', title: '职业'}
				      ,{field:'wealth', width:137, title: '财富', sort: true}
				    ]]
				});
				
				table.render({
				    elem: '#test1'
				    ,url: '../../api/table.js'
					,toolbar: '#toolbarDemo'
					,defaultToolbar: []
				    ,cellMinWidth: 80 
					,totalRow: true
				    ,cols: [[
				      {field:'id', width:100, title: 'ID', sort: true, totalRowText: '单据合计:'}
				      ,{field:'username', width:80, title: '用户名',}
				      ,{field:'sex', width:80, title: '性别', sort: true}
				      ,{field:'city', width:80, title: '城市'}
				      ,{field:'sign', title: '签名', width: '30%', minWidth: 100}
				      ,{field:'experience', title: '积分', sort: true}
				      ,{field:'score', title: '评分', sort: true}
				      ,{field:'classify', title: '职业'}
				      ,{field:'wealth', width:137, title: '财富', sort: true}
				    ]]
				});	
				
				/* ↓↓↓↓↓↓↓↓供货商账务↓↓↓↓↓↓↓↓↓↓ */	
				table.render({
				    elem: '#condition2'
				    ,height: 350
				    ,url: '../../api/table.json' //数据接口
				    ,page: true //开启分页
					,totalRow: true
				    ,cols: [[ //表头
				      {field: 'id', title: 'ID', width:80, sort: true, fixed: 'left',totalRowText: '合计'}
				      ,{field: 'username', title: '用户名', width:80}
				      ,{field: 'sex', title: '性别', width:80, sort: true}
				      ,{field: 'city', title: '城市', width:80} 
				      ,{field: 'sign', title: '签名', width: 177}
				      ,{field: 'experience', title: '积分', width: 80, sort: true}
				      ,{field: 'score', title: '评分', width: 80, sort: true}
				      ,{field: 'classify', title: '职业', width: 80}
				      ,{field: 'wealth', title: '财富', width: 135, sort: true}
				    ]]
				  });
				
				laydate.render({
					elem: '#test-startDate-4'
				});
				laydate.render({
					elem: '#test-endDate-4'
				});
				/* ↓↓↓↓↓↓↓↓供货商商品销售情况↓↓↓↓↓↓↓↓↓↓ */
				table.render({
				    elem: '#condition1'
				    ,height: 350
				    ,url: '../../api/table.json' //数据接口
				    ,page: true //开启分页
					,totalRow: true
				    ,cols: [[ //表头
				      {field: 'id', title: 'ID', width:80, sort: true, fixed: 'left',totalRowText: '合计'}
				      ,{field: 'username', title: '用户名', width:80}
				      ,{field: 'sex', title: '性别', width:80, sort: true}
				      ,{field: 'city', title: '城市', width:80} 
				      ,{field: 'sign', title: '签名', width: 177}
				      ,{field: 'experience', title: '积分', width: 80, sort: true}
				      ,{field: 'score', title: '评分', width: 80, sort: true}
				      ,{field: 'classify', title: '职业', width: 80}
				      ,{field: 'wealth', title: '财富', width: 135, sort: true}
				    ]]
				  });
				
				tableSelect.render({
				    elem: '#demo1',
				    searchKey: 'my',
				    checkedKey: 'id',
				    searchPlaceholder: '',
				    table: {
				        url: '../../api/tableSelect.json',
				        cols: [[
				            { field: 'id', title: 'ID', width: 100 },
				            { field: 'username', title: '姓名', width: 300 },
				            { field: 'sex', title: '性别', width: 100 }
				        ]]
				    },
					done: function (elem, data) {
						var NEWJSON = []
						layui.each(data.data, function (index, item) {
							NEWJSON.push(item.username)
						})
						elem.val(NEWJSON.join(","))
					}
				});
					
				laydate.render({
					elem: '#test-startDate-3'
				});
				laydate.render({
					elem: '#test-endDate-3'
				});
				/* ↓↓↓↓↓↓↓↓供货商供货情况↓↓↓↓↓↓↓↓↓↓ */
				tableSelect.render({
				    elem: '#demo',
				    searchKey: 'my',
				    checkedKey: 'id',
				    searchPlaceholder: '',
				    table: {
				        url: '../../api/tableSelect.json',
				        cols: [[
				            { field: 'id', title: 'ID', width: 100 },
				            { field: 'username', title: '姓名', width: 300 },
				            { field: 'sex', title: '性别', width: 100 }
				        ]]
				    },
					done: function (elem, data) {
						var NEWJSON = []
						layui.each(data.data, function (index, item) {
							NEWJSON.push(item.username)
						})
						elem.val(NEWJSON.join(","))
					}
				});
				
				table.render({
				    elem: '#condition'
				    ,height: 350
				    ,url: '../../api/table.json' //数据接口
				    ,page: true //开启分页
					,totalRow: true
				    ,cols: [[ //表头
				      {field: 'id', title: 'ID', width:80, sort: true, fixed: 'left',totalRowText: '合计'}
				      ,{field: 'username', title: '用户名', width:80}
				      ,{field: 'sex', title: '性别', width:80, sort: true}
				      ,{field: 'city', title: '城市', width:80} 
				      ,{field: 'sign', title: '签名', width: 177}
				      ,{field: 'experience', title: '积分', width: 80, sort: true}
				      ,{field: 'score', title: '评分', width: 80, sort: true}
				      ,{field: 'classify', title: '职业', width: 80}
				      ,{field: 'wealth', title: '财富', width: 135, sort: true}
				    ]]
				  });
				laydate.render({
					elem: '#test-startDate-2'
				});
				laydate.render({
					elem: '#test-endDate-2'
				});
			})
		</script>
	</body>
</html>
